/*
 * @Description: 收藏详情 商品列表组件
 * @Author: kanglin
 * @Date: 2018-06-11 18:56:42
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.collection__products{
		color: #444444;
		.header{
			padding: 0 38*@rem-per-px;
			height: 80*@rem-per-px;
		}
		.header__icon {
			margin: 21*@rem-per-px 0;
			line-height: 80*@rem-per-px;
			width: 34*@rem-per-px;
			height: 34*@rem-per-px;
			background-size: 100%;
			display: inline-block;
			background-repeat: repeat;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/icon_Beauty make-up.png');
		}
		.header__text {
			vertical-align: top;
			line-height: 80*@rem-per-px;
			font-size: 30*@rem-per-px;
			color: @main-font-color;
		}
		.list{
			padding: 0 38*@rem-per-px;
			list-style-type: none;
			// padding-top: 4*@rem-per-px;
		}
		.list__item{
			margin-bottom: 32*@rem-per-px;
		}
		.list__item__thumb{
			width: 160*@rem-per-px;
			height: 160*@rem-per-px;
			border-radius: 14*@rem-per-px;
			overflow: hidden;
			position: relative;
			// background: rebeccapurple;
			float: left;
			&> img{
				width: 100%;
			}
		}
		.list__item__content{
			width: 460*@rem-per-px;
			margin-left: 178*@rem-per-px;
			padding-top: 20*@rem-per-px;
		}
		.list__item__content__title{
			font-size: 22*@rem-per-px;
			height: 100*@rem-per-px;
			line-height: 1.8;
		}
		.list__item__content__info{
			height: 36*@rem-per-px;
			font-size: 22*@rem-per-px;
			position: relative;
		}
		.list__item__content__info__cart{
			display: inline-block;
			position: absolute;
			right: 0;
			width: 36*@rem-per-px;
			height: 36*@rem-per-px;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/icon_Shopping Cart.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.list__item__thumb__icon{
			position: absolute;
			left: 0;
			top: 0;
			width: 60*@rem-per-px;
			height: 60*@rem-per-px;
			display: block;
			&>img{
				width: 100%;
			}
		}
		.list__item__content__info__price{
			color: #ff6683;
		}
	}

</style>

<template>
	<div class="collection__products">
		<div class="header">
			<i class="header__icon" />
			<span class="header__text">
				{{ $t('collection.try_on_product') }}
			</span>
		</div>
		<ul class="list">
			<li
				v-for="item in products"
				:key="item.id"
				class="list__item clearfix">
				<div class="list__item__thumb">
					<img
						:src="item.thumb_image && item.thumb_image.key || null"
						alt="">
					<i
						v-if="item.link_product"
						class="list__item__thumb__icon">
						<img
							:src="item.link_product.type_icon"
							alt="">
					</i>
				</div>
				<div class="list__item__content">
					<p class="list__item__content__title">
						{{ item.title || $t('common.none') }}
					</p>
					<div class="list__item__content__info">
						<span class="list__item__content__info__price">
							￥：{{ item.sell_price }}
						</span>
						<a
							v-if="item.link_product"
							:href="item.link_product.url"
							class="list__item__content__info__cart"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'CollectionProducts',
	props: {
		products: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {};
	},
	methods: {},
};
</script>
